<template>
	<el-time-picker v-model="myValue"
					:editable="editable"
					:size="size"
					:placeholder="placeholder"
					:start-placeholder="startPlaceholder"
					:end-placeholder="endPlaceholder"
					:arrow-control="arrowControl"
					:picker-options="pickerOptions"
					:value-format="valueFormat"
					:default-value="defaultValue"
					:format="format"
					@change="change"></el-time-picker>
</template>

<script>
export default {
  props: {
    value: [String, Array],
    editable: {
      type: Boolean,
      default: false
    },
    size: {
      type: String
    },
    placeholder: {
      type: String
    },
    startPlaceholder: {
      type: String
    },
    endPlaceholder: {
      type: String
    },
    arrowControl: {
      type: Boolean,
      default: true
    },
    pickerOptions: {
      type: Object
    },
    format: {
      type: String
    },
    valueFormat: {
      type: String
    },
    defaultValue: {
      type: [String, Date]
    }
  },
  data () {
    return {
      myValue: ''
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.myValue = newVal
      }
    },
    myValue (newVal) {
      this.$emit('input', newVal)
    }
  },
  computed: {},
  methods: {
    change (newVal) {
      this.$emit('change', newVal)
    }
  }
}
</script>
